<template>
  <div class="categoryContainer">
    <!-- <div class="bg"></div> -->
    <!-- 面包屑 注意面包屑的点击方法，要加native，因为组件事件触发需要它 -->
    <!-- <el-breadcrumb class="bread" separator-class="icon-jiantou_liebiaoxiangyou">
      <el-breadcrumb-item
        v-for="(item, index) in breadNum"
        :key="index"
        :to="{ path: bread[index].path, query: bread[index].query }"
        @click.native="fnBreadClick"
        >{{ bread[index].text }}</el-breadcrumb-item
      >
    </el-breadcrumb> -->
    <!-- 子组件在这里进行动态渲染 -->
    <!-- <div class="cover-white"></div> -->
    <router-view />

    <bottom-bar></bottom-bar>
  </div>
</template>
<script>
import bottomBar from '@/components/bottomBar.vue'
export default {
  components: { bottomBar },
  data() {
    return {
      // bread: [
      //   { text: '地产分类', path: '/category/categoriers' },
      //   { text: '地产列表', path: '/category/list', query: {} },
      //   { text: '地产详情', path: '/category/detail', query: {} }
      // ],
      // breadNum: 1
    }
  },
  mounted() {
    // this.fnBreadClick()
  },
  created() {
    // console.log('获取路由', this.$route.path.includes('category'))
  },
  methods: {
    // fnBreadClick() {
    //   const nowpage = this.$route.name
    //   switch (nowpage) {
    //     case 'categoriers':
    //       this.breadNum = 1
    //       break
    //     case 'list':
    //       this.breadNum = 2
    //       break
    //     case 'detail':
    //       this.breadNum = 3
    //       break
    //     default:
    //       break
    //   }
    // }
  },
  watch: {
    //   $route(to, from) {
    //     this.fnBreadClick()
    //   }
  }
}
</script>
<style lang="scss">
.categoryContainer {
  // background-image: url('@/assets/img/背景图.jpg');
  // background:#F0F2F4;
  // background-color: #6DD5FA;

  background-size: cover;
  min-height: 85vh;

  font-size: 16px !important;
  .bg {
    height: 250px;
    background-image: url('@/assets/img/bg3.png');
    background-size: 100%;
  }
  .bread {
    line-height: 30px;
    height: 30px;

    .el-breadcrumb__inner.is-link {
      color: #000;
      font-size: 25px;
      font-weight: bold;
    }
  }
}
.categoryContainer .bread .el-breadcrumb__inner.is-link {
  font-size: 16px;
  font-weight: normal;
}

// 导航栏下方填充空白
.cover-white {
  height: 20px;
}
</style>
